<template>
	<view v-if="align == 'center'" :style="'border: solid 1rpx '+color+'; width: '+width+'%;'" style="display: flex; border-radius: 15rpx;  height: 90rpx; margin: 0 auto;">
		<icon :style="'color:'+color+';'" style="font-size: 60rpx; line-height: 90rpx; margin: 0 15rpx;" :class="icon" class="iconfont"></icon>
		<input :type="type" @input="input" :password="password" @focus="focus()" @blur="blur()" :placeholder="placeholder" style="height: 100%; line-height: 90rpx;" />
	</view>
	
	<view v-else :style="'border: solid 1rpx '+color+'; width: '+(7.5*width)+'rpx;'" style=" display: flex; border-radius: 15rpx;   height: 90rpx;  margin: 0 0 0 75rpx;">
		<icon :style="'color:'+color+';'" style="font-size: 60rpx; line-height: 90rpx; margin: 0 15rpx;" :class="icon" class="iconfont"></icon>
		<input :type="type" @input="input" :password="password" @focus="focus()" @blur="blur()" :placeholder="placeholder" style="height: 100%; line-height: 90rpx;" />
	</view>
</template>

<script>
	export default {
		props: {
			icon: {},
			placeholder: {},
			type: {
				default: 'text'
			},
			password:{
				default:false
			},
			align:{
				default:'center'
			},
			width:{
				default:80
			},
		},
		data() {
			return {
				color: '#95A3AB',
				text:''
			}
		},
		methods: {
			focus() {
				this.color = '#36A5FF';
			},
			blur() {
				this.color = '#95A3AB';
				
			},
			input(e){
				this.text = e.detail.value
				this.$emit('input',e.detail.value)
			}
		}
	}
</script>

<style>
</style>
